<!-- 师傅端待处理的订单详情 -->
<template>
	<block class="warp">
		<view class="Infobox" v-if="isfinsh">
			<view class="Infoboxform">
				<view class="textblock font32">报修单号：{{data.info.order_id}}
					<text v-if="data.info.status == '4'">已完成</text>
					<text v-if="data.info.status == '0'">已报修</text>
					<text v-if="data.info.status == '1'">待受理</text>
					<text v-if="data.info.status == '2'">待派工</text>
					<text v-if="data.info.status == '3'">进行中</text>
				</view>
				<view class="textblock ">联系人：{{data.info.user_name}}</view>
				<view class="textblock ">联系电话：<text class="c66">{{data.info.user_mobile}}</text><text
						class="iconfont cmain ml30" @click="callphone(data.info.user_mobile)">&#xe8b8;</text></view>
				<view class="textblock ">报修地址：{{data.info.address}} <text style="color: #007AFF;" @click="moveTo"
						class="ml30">导航</text></view>
				<view class="textblock " style="display: inline-block;">维修时间：
					<view class="c66" style="display: inline-block;">{{ data.info.est_start_time}}
						<view style="display: table-cell;" class="c66">{{data.info.est_end_time}}</view>
					</view>

				</view>
				<!-- <view class="textblock ">维修时间：{{data.est_start_time}}</view> -->
				<view class="textblock flex">
					上门师傅：
					<view class="user" v-for="(item,index) in data.worker">
						<image :src="item.avatar" class="userimg"></image>
						<view class="userinfo">
							<text class="name">
								{{item.nickname}}
								<text class="startmun">{{item.start}}.0</text>
								<text class="starticon" :class="'starticon'+item.start"></text>
							</text>
							<text class="priceone">工时费：{{item.unit_price}}元/小时</text>							
							<text class="pricetwo">上门费：已付{{item.first_pay_price}}元</text>
						</view>
					</view>
				</view>
				<view class="textblock ">问题描述：{{data.info.mark}}</view>
			</view>

			<view class="btn bulebtn" @click="confirm()">确认接单</view>
			<view class="btn yellowbtn" @click="openUnAccept()">暂不接单</view>

		</view>

		<zwyPopUp :ishide='isshowone'>
			<view class="boxtitle">
				<text class='iconfont' @click="closeplo()">&#xe692;</text>
			</view>
			<view class="boxInfo">
				<view class="boxInfotext">是否确认接单？</view>
				<view class="btn bulebtn" @click="AcceptOrder()"> 确认暂不接单</view>
			</view>
		</zwyPopUp>

		<zwyPopUp :ishide='isshowtwo'>
			<view class="boxtitle">
				<text class='iconfont' @click="closeplo()">&#xe692;</text>
			</view>
			<view class=" boxInfo">
				<view class="boxInfotext">是否确认暂不接单？</view>
				<view class="btn yellowbtn" @click="openUnAccepttext()"> 确认暂不接单</view>
			</view>
		</zwyPopUp>


		<zwyPopUp :ishide='isshowthree'>
			<view class="boxtitle">
				<text class="texttitle">请填写拒单原因</text>
				<text class='iconfont' @click="closeplo()">&#xe692;</text>
			</view>
			<view class="boxInfo boxInfomartop">
				<view class="boxInfotext ">
					<view class="boxinput">
						<text>选择类型：</text>
						<input type="text" @click="showPopupFrom()" :value="productype.content" placeholder="请选择类型.."
							class="checkinput" />
						<view class="iconfont iconright">&#xe60f;</view>
					</view>
					<view class="boxinput">
						<text>具体原因：</text>
						<textarea id="" cols="30" rows="10" placeholder="请输入具体原因.." v-model="reason"
							class="textinput"></textarea>
					</view>
				</view>
				<view class="btn yellowbtn" @click="submintUnAccept()">确认提交</view>
			</view>
		</zwyPopUp>

		<!-- 下拉滑动组件-->
		<hqs-popup title="选择类型" :from="popFrom" :mask-click="maskClick" v-model="showPop">
			<view>
				<view class="list-item" v-for="(item, i) in list" :key="i">
					<text class="productli" @click="productypefun(item)">{{item.content}}</text>
				</view>

			</view>
		</hqs-popup>


	</block>
</template>

<script>
	import zwyPopUp from '@/components/zwy-popup/zwy-popup.vue'
	import hqsPopup from '@/components/hqs-popup/hqs-popup.vue'
	import {
		orderDetial,
		WokerAcceptOrde
	} from '../../api/api.js'
	export default {
		components: {
			zwyPopUp,
			hqsPopup
		},
		data() {
			return {
				isshowone: false,
				isshowtwo: false,
				isshowthree: false,
				data: "",
				isfinsh: false,
				productype: '', //选择的不接受订单的产品类型
				id: "",
				reason: "",
				showPop: false,
				popFrom: 'bottom',
				list: [],
				maskClick: true,
			}
		},

		onLoad: function(option) {
			console.log('页面初始化', option)
			let data = JSON.parse(option.data);
			this.id = data.id
			this.datainit()
		},
		// created() {
		// 	this.datainit()
		// },
		methods: {
			callphone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 确认接单
			confirm() {
				uni.showModal({
					title: '提示',
					content: "是否确认接单?",
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							this.operate(1)
						} else {
							uni.showToast({
								title: '已取消',
								icon: 'none'
							})
						}

					},


				})
			},
			// 接单拒单
			operate(type) {
				let params = {
					id: this.id,
					type: type
				}
				WokerAcceptOrde(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.status == 200) {
						uni.navigateTo({
							url: `/pages/index/index?tab=&{type}`
						})
					}
				})
			},
			// 调用导航
			moveTo() {
				// 使用微信内置地图查看位置
				wx.openLocation({
					'latitude': Number(this.data.info.lat),
					'longitude': Number(this.data.info.lng),
					scale: 28,
					name: this.data.info.address, //打开后显示的地址名称
				})
			},
			// 初始化
			datainit() {
				this.isfinsh = false
				let data = {
					id: this.id
				}
				orderDetial(data).then(res => {
					this.data = res.data
					this.list = res.data.refuse_type
					console.log('请求的信息', this.data)
					this.isfinsh = true
				})
			},
			dealtime(time) {

				return this.$moment(Number(time)).format('YYYY-MM-DD hh:mm:ss')
			},
			/* 关闭弹窗*/
			closeplo() {
				this.isshowone = false;
				this.isshowtwo = false;
				this.isshowthree = false;
			},
			/* 接受订单：*/
			openAccept() {
				this.isshowone = true;
				this.isshowtwo = false;
				this.isshowthree = false;
			},
			/* 不接受订单 */
			openUnAccept() {
				this.isshowone = false;
				this.isshowtwo = true;
				this.isshowthree = false;
			},
			/* 不接受订单的理由填写 */
			openUnAccepttext() {
				this.isshowone = false;
				this.isshowtwo = false;
				this.isshowthree = true;
			},


			/* 下拉的显示*/
			showPopupFrom(from) {
				this.showPop = true
			},

			/* 选中的产品的类型*/
			productypefun(e) {
				this.productype = e;
				this.showPop = false
				console.log("this.productype", this.productype)
			},

			/* 提交不接受订单的原因 :没写逻辑*/
			submintUnAccept() {
				console.log("提交不接受订单的原因!")
				let data = {
					id: this.id,
					type: 2,
					refuse_type: this.productype.id,
					refuse_content: this.reason
				}
				// return 
				console.log('拒单操作打印', data)
				WokerAcceptOrde(data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/index/index'
						})
						return
					}

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},

			/* 确认接单页面：这里我直接返回的上一个页面。没写逻辑 */
			AcceptOrder() {
				uni.navigateBack({
					delta: 1
				});
			}



		}
	}
</script>



<style scoped lang="less">
	.Infobox {
		background: #F6F9FF;
		padding: 60rpx 40rpx;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;

		.Infoboxform {
			display: block;
			background-color: #FFFFFF;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
			margin-bottom: 90rpx;

			.textblock {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 66rpx;
				color: #333333;
				border-bottom: 2rpx #F7F5F6 solid;

				.user {
					display: flex;

					.userimg {
						width: 140rpx;
						height: 140rpx;
						display: flex;
					}

					.name {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;

						.startmun {
							font-size: 24rpx;
							color: #FEC860;
							padding: 0 0 0 24rpx;
						}

						.starticon {
							width: 17rpx;
							height: 17rpx;
							display: inline-block;
							color: rgba(255, 255, 255, 0);
							background: url(../../static/zyyxsf.png) repeat-x center;
							background-size: contain;
							vertical-align: middle;
							margin: -2px 0 0 6px;

						}

						.starticon2 {
							width: 34rpx;
						}

						.starticon3 {
							width: 51rpx;
						}

						.starticon4 {
							width: 68rpx;
						}

						.starticon5 {
							width: 85rpx;
						}

					}

					.priceone {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #5490FE;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 24rpx 0;
					}

					.pricetwo {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #FEC860;
						display: block;
						padding: 0 0 0 24rpx;
					}
				}
			}

			.font32 {
				color: #5490FE;
				font-size: 32rpx;

				text {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 26px;
					color: #FEC860;
					float: right;
				}
			}
		}

	}

	.textblock.flex {
		padding: 20rpx 0;
		justify-content: left;
		align-items: left;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: #FFFFFF;
		background: #5490FE;
		box-shadow: 0px 3rpx 5rpx #5490FE;
		border-radius: 80rpx;
		text-align: center;
		margin: 16px auto;
	}

	.btn.yellowbtn {
		background: #FEC860;
		box-shadow: 0px 3rpx 5rpx #E6EFFF;
	}

	.boxtitle {
		display: block;
		text-align: center;
		margin: 22rpx 0;
		height: 36rpx;

		.texttitle {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 32rpx;
			color: #333333;
			padding: 0 0 0 36px;
		}

		.iconfont {
			float: right;
			line-height: 34rpx;
		}
	}

	.boxInfo {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.boxInfotext {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 26rpx;
			color: #333333;
			padding: 0 26rpx;

			.boxinput {
				display: flex;
				margin-top: 32rpx;

				text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 29rpx;
					color: #333333;
					margin-top: 8rpx;
				}

				.iconright {
					position: absolute;
					top: 45rpx;
					right: 55rpx;
					color: #999999;
					font-size: 28rpx;
					margin: 0;
				}

				.checkinput {
					width: 360rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #999999;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: #666666;
					text-align: left;
					padding: 0px 8rpx;
					box-sizing: border-box;
				}

				.textinput {
					width: 360rpx;
					height: 120rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #999999;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: #666666;
					text-align: left;
					padding: 4rpx 8rpx;
					box-sizing: border-box;

				}

			}
		}

		.btn {
			width: 400rpx;
			margin-top: 60rpx;
		}
	}

	.boxInfo.boxInfomartop {
		top: 56%;
	}

	.productli {
		font-size: 29rpx;
		font-weight: 500;
		line-height: 75rpx;
		color: #333333;
		text-align: left;
		display: block;
		line-height: 75rpx;
		border-bottom: 1px #e8e8e8 dashed;
		padding: 0 11rpx;
		box-sizing: border-box;
	}
</style>
